<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 css 文件 -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        /* 模糊匹配的方式 设置选择器 */
        /* col-xs-2  col-md-10 */
        div[class*="col"]{
            height: 50px;
            border:solid 1px #000;
        }

        .col-20{
            width: 20%;
            float: left;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <h2>栅格系统</h2>
        <hr>
        <!--       <768 占满  > 768  2个 >992 4个   > 1200 6 个                                         -->
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>
    </div>

    <div class="container">
        <h2>列偏移</h2>
        <!--                         偏移          -->
        <div class="col-xs-4 col-xs-offset-4"></div>

        <!-- clearfix 用来清除浮动 -->
        <div class="clearfix"></div>
        <h2>列嵌套</h2>
        <div class="col-xs-6">
            <div class="col-xs-4 col-xs-offset-4"></div>
        </div>
    </div>


    <script src="./bootstrap/js/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>